<template>
  <div id="home">

    <h1>{{ msg }}</h1>
    <h2>新闻组件</h2>


    <button @click="toDetail()">通过js跳转到detail页面</button>

    <button @click="toUse()">通过js跳转到use页面</button>
  </div>
</template>



<script>
export default {
  data() {
    return {
      msg: "新闻组件"
    };
  },
  methods: {
    toDetail() {
      //第一种跳转方式（默认的hash模式）

      // this.$router.push({ path: 'news' })

      this.$router.push({ path: "/detail/123" });
    },

    toUse() {
      //命名路由方式
      this.$router.push({ name: "user" });
    }
  },
  mounted() {
    console.log("news组件渲染完毕");
  }
};
</script>

<style lang="scss">
</style>